<template>
  <div>

    <!--   模态框  -->
    <el-dialog
      :title="title"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>

      <el-input placeholder="请输入用户名" v-model="userform.name" ></el-input>
      <el-input placeholder="请输入地址" v-model="userform.address" ></el-input>

      <span slot="footer" class="dialog-footer">
    <el-button @click="canel">取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
  </span>
    </el-dialog>

    <!--工具条    -->
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu     router
                     :default-active="this.$router.path"

                     :default-openeds="['1', '2','3']"

                     class="el-menu-vertical-demo"

                     background-color="#545c64"

                     text-color="#fff"

                     active-text-color="#ffd04b">

          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>电影项目管理</template>
            <el-menu-item-group>
              <template slot="title">编剧管理</template>
              <el-menu-item index="/novel" >小说表</el-menu-item>
              <el-menu-item index="/writer">作家表</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="电影管理">
              <el-menu-item index="/film">电影表</el-menu-item>
              <el-menu-item index="/log">日志表</el-menu-item>
            </el-menu-item-group>

          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu"></i>电影人员管理</template>
            <el-menu-item-group>
              <template slot="title">人员管理</template>
              <el-menu-item index="/department">部门信息</el-menu-item>
              <el-menu-item index="/permissions">权限管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-setting"></i>用户管理</template>
            <el-menu-item-group>
              <template slot="title">用户信息管理</template>
              <el-menu-item index="/user">用户信息</el-menu-item>
              <el-menu-item index="">其他</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>


      <el-container>
        <el-header style="text-align: -moz-right; font-size: 12px">
          <!-- 同步queryNovelName 查询绑定点击时间findAll()       -->
          <el-input placeholder="请输入关键字" v-model="queryNovelName" style="width:180px" ></el-input>
          <el-button type="primary" @click="findAll()">查询</el-button>
          <el-button type="success" @click="update()" plain icon="el-icon-check" circle>添加</el-button>
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span >管理员</span>
        </el-header>

        <el-main>
          <el-table :data="tableData">

            <el-table-column prop="date" label="日期" width="140">
            </el-table-column>

            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>

            <el-table-column prop="address" label="地址">
            </el-table-column>

            <el-table-column prop="id" label="id">
            </el-table-column>

            <el-table-column prop="operate" label="操作">
              <template slot scope="scope">
                <el-button  @click="update(scope.row)" type="primary" icon="el-icon-edit" circle></el-button>
                <!-- 绑定删除 传入参数slot scope.row              -->
                <el-button @click="del(scope.$index, scope.row.id)" type="danger" icon="el-icon-delete" circle></el-button>
              </template>
            </el-table-column>

          </el-table>
        </el-main>

      </el-container>
    </el-container>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange"
                     :current-page="currentPage" :page-size="pageSize" :total="totals" style="aligin:center;">
      </el-pagination>
    </el-col>


  </div>

</template>

<script>
  export default {
    data() {
      const item = {
        date: '2016-05-02',
        name: '日志测试',
        address: '上海市普陀区',
        id: 1,
      };
      return {
        tableData: Array(20).fill(item),
        // 模态框数据
        title:"新增用户",
        userform:{},
        // 是否弹出模态框
        centerDialogVisible: false,
        // 高级查询参数
        queryNovelName:null,
        // 总条数
        totals: 100,
        pageSize:5,
        currentPage:1,
      }
    },
    methods: {
      // 查询所有小说家数据
      findAll() {
        let para = {
          pageSize: this.pageSize,
          currentPage: this.currentPage,
          name: this.queryNovelName
        };
        console.log(para)
        this.$http.get("/novel",this.para)
          .then(result=>{
            console.log(result.data);
            // 传给前端数据
            this.tableData=result.data;
          })
          .catch(result=>{
            console.log(this.ruleForm)
          })
      },
      //删除
      del(index, id) {
        console.log(id);
        console.log(index);
        this.$http.delete("/novel/"+this.id)
          .then(result=>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            console.log(result.data);
            this.currentPage = 1;
            // 跳转
            this.findAll();
          })
          .catch(result=>{
            this.$message({
              type: 'info',
              message: '删除失败！'
            });
          });
      },
      //修改
      update(row) {
        console.log(row);
        this.userform=Object.assign({}, row);
        console.log(this.userform);
        this.centerDialogVisible=true
      },
      //取消
      canel(){
        this.title="新增用户"
        this.userform={}
        this.centerDialogVisible=false;
      },
      // 保存
      // 分页
      handleCurrentChange(val) {
        console.log(val)
        this.currentPage = val;
        this.findAll();
      },
      save() {
        const data=this.userform
        console.log(data)
        this.$http.put("/novel",data)
          .then(result=>{
            this.dialogVisible=false;
            this.findAll();
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
            console.log(result.data);
            this.currentPage = 1;
            // 跳转
            this.findAll();
          })
          .catch(result=>{
            this.$message({
              type: 'info',
              message: '修改失败!'
            });
            console.log(error);
          });
      }
    },
    closeDialog () {

      this.dialogVisible = false

    },
    // 钩子函数 调用findAll
    mounted() {
      this.findAll();
    }
  }
</script>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>
